<template>
  <view>
    <view
      @click="$emit('item', it)"
      class="bg-cell pa-3 pos-r"
      hover-class="btn-hover"
      :class="{
        'u-border-bottom': j < list.length - 1,
      }"
      :title="it.title"
      v-for="(it, j) in list"
      :key="it.title"
    >
      <view class="al-c">
        <view class="mr-2" v-if="it.icon">
          <!-- <u-avatar :src="it.icon" size="30"></u-avatar> -->
          <q-icon :src="it.icon" size="22" mode="aspectFit"></q-icon>
        </view>
        <view class="fz-17 ml-1">{{ it.title }}</view>
        <view class="ml-auto"></view>
        <view class="op-5 fz-14" v-if="it.value">
          {{ it.value }}
        </view>
        <view class="ml-2 op-7" v-if="arrow">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>

      <button
        class="pos-mask op-0"
        v-if="it.openType"
        :open-type="it.openType"
      ></button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: Array,
    arrow: Boolean,
  },
};
</script>